<script setup lang="ts">
import { useUserStore } from '../stores/user'
import { computed } from 'vue'

const userStore = useUserStore()
const currentUser = computed(() => userStore.currentUser)
</script>

<template>
  <div class="welcome-container">
    <div class="welcome-header">
      <svg class="welcome-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#1890ff"/>
        <path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z" fill="#1890ff"/>
      </svg>
      <h1>欢迎使用北京旅游系统</h1>
    </div>

    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>用户信息</span>
        </div>
      </template>
      <div class="user-info">
        <el-avatar :size="64" icon="el-icon-user" class="user-avatar" />
        <div class="user-details">
          <h2>{{ currentUser?.name }}</h2>
          <p>角色：{{ currentUser?.role === 'admin' ? '管理员' : '游客' }}</p>
          <p>用户名：{{ currentUser?.username }}</p>
        </div>
      </div>
    </el-card>

    <div class="feature-cards">
      <el-card class="feature-card">
        <template #header>
          <div class="card-header">
            <span>景点推荐</span>
          </div>
        </template>
        <div class="feature-content">
          <svg class="feature-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136V232h752v560z" fill="#1890ff"/>
            <path d="M424 352h-72c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h72c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8zM676 352h-72c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h72c4.4 0 8-3.6 8-8V360c0-4.4-3.6-8-8-8z" fill="#1890ff"/>
          </svg>
          <p>发现北京最受欢迎的旅游景点，获取最新的旅游信息和推荐。</p>
        </div>
      </el-card>

      <el-card class="feature-card">
        <template #header>
          <div class="card-header">
            <span>旅游路线</span>
          </div>
        </template>
        <div class="feature-content">
          <svg class="feature-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M512 128c-212.1 0-384 171.9-384 384s384 384 384 384 384-171.9 384-384-171.9-384-384-384zm0 640c-141.4 0-256-114.6-256-256s114.6-256 256-256 256 114.6 256 256-114.6 256-256 256z" fill="#1890ff"/>
            <path d="M512 320c-88.4 0-160 71.6-160 160s71.6 160 160 160 160-71.6 160-160-71.6-160-160-160z" fill="#1890ff"/>
          </svg>
          <p>规划您的北京旅游路线，获取最佳出行建议和交通信息。</p>
        </div>
      </el-card>

      <el-card class="feature-card">
        <template #header>
          <div class="card-header">
            <span>文化活动</span>
          </div>
        </template>
        <div class="feature-content">
          <svg class="feature-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
            <path d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-260 72h96v209.9L621.5 312 572 347.4V136z" fill="#1890ff"/>
          </svg>
          <p>了解北京丰富的文化活动和节日庆典，体验传统与现代的完美结合。</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.welcome-container {
  padding: 20px;
}

.welcome-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.welcome-icon {
  width: 48px;
  height: 48px;
  margin-right: 16px;
}

.welcome-header h1 {
  font-size: 24px;
  color: #1890ff;
  margin: 0;
}

.welcome-card {
  margin-bottom: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  margin-right: 20px;
}

.user-details h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
}

.user-details p {
  margin: 5px 0;
  color: #606266;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.feature-card {
  height: 100%;
}

.feature-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

.feature-content p {
  margin: 0;
  line-height: 1.6;
}
</style>
